import React, {useEffect, useState} from 'react';
import { useHistory } from "react-router-dom";
import '../css/mine.css';
import img from '../assets/tx.png'
import request from "../utils/request";
import { Button } from 'antd-mobile';
import MineNav from './customize/minenav'

export default ()=>{
    const [user,setUser] =useState('请登录');
    const history = useHistory();

    useEffect(()=>{
        let name = localStorage.getItem('name')
        setUser(name)
        if(!name){
            history.push('/login');
        }
    },[user]);

    const out = ()=>{
        localStorage.removeItem('name');
        history.push('/login');
    }

    return (
        <div className='wd'>
            <section style={{position:'fixed',height:'100%',width:'100%',top:0,left:0}}>
                <MineNav/>
            </section>
            <section className='me'>
                <div className='bg'>
                    <img src={img} />
                </div>
            </section>
            <section className='mecon'>
                <h2>{user}</h2>
            </section>
            <section className='melist'>
                <section>
                    <div>
                        <div>
                            <div>
                                <h3>个人资料</h3>
                                <div style={{ textAlign: 'center'}}>我不想写</div>
                            </div>
                        </div>
                    </div>
                </section>
            </section>

            <section style={{margin:'auto'}}>
                <Button color='danger' onClick={ ()=> out()  }>退出登录</Button>
            </section>



        </div>
    )
}